<template>
  <div class="info-detail">
    <div class="container">
      <div class="header">
        <div class="title">{{ detail.title }}</div>
        <div class="publish-time">
          发布于：{{ formatDate(detail.createTime) }}
        </div>
        <div class="views">
          <i class="el-icon-view"></i>{{ detail.visitorNum }}
        </div>
      </div>
      <div class="content" v-html="detail.detail"></div>
      <div class="write-remark">
        <div class="left">🌺🌺🌺</div>
        <div class="right" @click="dialogVisible = true">
          🌲<span>小评一下</span>🌲
        </div>
      </div>
    </div>
    <!-- 评论 -->
    <div class="remark">
      <RemarkView
        :remarkListLoading="remarkListLoading"
        :remarkList="remarkDataList"
        :total="total"
        @getRemarkList="getRemarkList"
      ></RemarkView>
      <!-- 分页 -->
      <el-pagination
        v-show="remarkDataList.length > 0"
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        :page-count="7"
        style="text-align: right; margin-top: 24px"
      >
      </el-pagination>
    </div>
    <!-- 写评论 -->
    <el-dialog
      title="写评论"
      :visible.sync="dialogVisible"
      width="56%"
      @close="html = ''"
      :close-on-click-modal="false"
    >
      <div class="editor-container">
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
          :mode="mode"
        />
        <Editor
          style="height: 210px; overflow-y: hidden"
          v-model="html"
          :defaultConfig="editorConfig"
          :mode="mode"
          @onCreated="onCreated"
        />
      </div>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRemark" :loading="insertLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import RemarkView from "@/components/RemarkView.vue";
import { getInfoDetail } from "@/api/user/info";
import { addRemark, getRemarkList } from "@/api/user/remark";
import userModule from "@/utils/userInfo";

export default {
  name: "InfoDetail",
  props: ["id"],
  components: {
    RemarkView,
    Editor,
    Toolbar,
  },
  data() {
    return {
      detail: {},
      remarkDataList: [],
      total: 0,
      page: 1,
      pageSize: 10,
      currentPage: 1,
      remarkListLoading: false,
      dialogVisible: false,
      insertLoading: false,
      // 富文本框配置
      editor: null,
      html: "",
      toolbarConfig: {
        // 排除菜单中的上传图片和上传视频功能
        excludeKeys: ["group-image", "insertVideo"],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {},
      },
      mode: "simple", // or 'simple'
    };
  },
  created() {
    this.getInfoDetail();
    this.getRemarkList();
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    // 获取咨询详情
    async getInfoDetail() {
      const res = await getInfoDetail({ newId: this.id });
      this.detail = res.data;
    },
    // 添加评论
    async addRemark() {
      const content = this.html;
      if (content === "") {
        this.$message.warning("请输入评论内容");
        return;
      }
      try {
        this.insertLoading = true;
        const res = await addRemark({
          userId: userModule.getUser().id,
          type: "info",
          typeId: this.id,
          content,
        });
        this.dialogVisible = false;
        this.getRemarkList();
      } finally {
        this.insertLoading = false;
      }
    },
    // 获取评论列表
    async getRemarkList() {
      try {
        this.remarkListLoading = true;
        const res = await getRemarkList({
          page: this.page,
          pageSize: this.pageSize,
          type: "info",
          typeId: this.id,
        });
        this.remarkDataList = res.data.records;
        this.total = res.data.total;
      } catch {
        this.$message.error("获取评论列表失败");
      } finally {
        this.remarkListLoading = false;
      }
    },
    // 时间格式判断
    padZero(num) {
      return num < 10 ? "0" + num : num;
    },
    // 时间格式化
    formatDate(timeArray) {
      if (!timeArray) return "暂无时间";
      let year = timeArray[0];
      let month = this.padZero(timeArray[1]);
      let day = this.padZero(timeArray[2]);
      let hour = this.padZero(timeArray[3]);
      let minute = this.padZero(timeArray[4]);
      let second = this.padZero(timeArray[5]) || "00";
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    handleCurrentChange(page) {
      this.page = page;
      this.currentPage = page;
      this.getRemarkList();
    },
    // 富文本框配置
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
  },
};
</script>

<style lang="less" scoped>
.info-detail {
  .container {
    margin: 80px 120px 10px;
    padding: 20px 40px;
    min-height: 300px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
    text-align: left;
    .header {
      display: flex;
      align-items: flex-end;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      .title {
        font-size: 24px;
        font-weight: bold;
      }
      .publish-time {
        margin-left: 20px;
        font-size: 14px;
        color: #999;
      }
      .views {
        margin-left: 20px;
        font-size: 14px;
        color: #999;
        i {
          margin-right: 4px;
        }
      }
    }
    .content {
      padding-top: 10px;
      min-height: 190px;
      font-size: 16px;
      line-height: 1.8;
    }
    .write-remark {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      font-size: 17px;
      .right {
        position: relative;
        cursor: pointer;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 0;
          height: 2px;
          background-color: #ccc;
          transition: all 0.3s ease-in-out;
        }
        &:hover::after {
          width: 100%;
          left: 0;
        }
        span {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
  .remark {
    margin: 10px 120px;
    min-height: 300px;
    border-top: 1px dashed #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
  }
  .editor-container {
    text-align: left;
    border: 1px solid;
  }
}
</style>